<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>picture_friend</title>
<link rel="stylesheet" type="text/css" href="/networkforum/css/base.css" />
<link rel="stylesheet" type="text/css" href="/networkforum/css/picture_main.css" />
<script type="text/javascript" src="/networkforum/js/picture_main.js"></script>
<!–[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<style type="text/css">
	.pictureFriend{
		width:99%;
		min-height:500px;
		height:auto;
		display:inline-block;
		position:relative;
	}
	.friendContainer{
		width:100%;
		min-height:200px;
		height:auto;
		display:inline-block;
	}
	.ul{
		width:33%;
		min-height:500px;
		height:auto;
		display:inline-block;
	}
	.leftPicture{
		float:left;
	}
	.rightPicture{
		float:right;
	}
	.pictureNav{
		width:100%;
		height:200px;
		background-color:#fffbff;
		position:relative;
		display:inline-block;
		margin-bottom: 10px;
	}
	.title{
		width:90%;
		height:50px;
		text-align:left;
		display:inline-block;
		position:relative;
	}
	.title img{
		float:left;
		margin-right:10px;
	}
	.title span{
		font-size:14px;
		font-weight:bolder;
		line-height:40px;
		vertical-align:middle;
		float:left;
	}
	.pninner{
		width:90%;
		height:50%;
		padding-top:15px;
	}
	.pninner li{
		min-width:30px;
		width:auto;
		height:25px;
		border:1px solid #ccc;
		margin:5px 10px 5px 0px;
		padding:0px 5px;
		line-height:25px;
		vertical-align:middle;
		font-size:12px;
		border-radius:3px;
		background-color:#f7f7f7;
	}
	li:hover{
		cursor:pointer;
	}
	.navCorner{
		position:absolute;
		width:17px;
		height:16px;
		left:309px;
		top:185px;
	}
	.innerLi{
		width: 100%;
		min-height: 200px;
		max-height: 450px;
		position: relative;
		display: inline-block;
		position: relative;
		overflow: hidden;
		margin-bottom: 5px;
	}
	.innerImage{
		min-width:230px;
		min-height: 200px;
		max-width:310px;
		max-height:450px;
		width:auto;
		height:auto;
		padding: 5px;
		background-color: #fff;
		display: inline;
		overflow: hidden;
		margin-bottom: 10px;
		position: relative;
		float: left;
	}
</style>
<script type="text/javascript">
window.onload = function(){
	//页面加载完成后通过myajax获取进一步的信息
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	//myajax.get("/networkforum/picture/friend_all_picture.do?index=0&size=20",function(d){
	myajax.get("/networkforum/picture/get_by_groupName.do?index=0&size=20&groupName=",function(d){
		var data = toJson(d);
		//相片展示
		var P = new PICTURE();
		P.FirendPicture(data);	
		window.parent.iFrameHeight();
		P = null;
	});

	myajax.get("/networkforum/picture/system_show_groups.do",groupType);	
		
	myajax = null;
	//添加scroll事件
	page.scrolls(param);
}
function groupType(d){
	var data = toJson(d);
	if(data.length==0)return;
	var pninner = document.getElementById("pninner");
	var frag = document.createDocumentFragment();
	for(var i =0;i<data.length;i++){
		var li = document.createElement("li");
		li.innerHTML = data[i].pictureGroupName;
		frag.appendChild(li);
	}
	pninner.appendChild(frag);
}
var param = {
	url:"/networkforum/picture/get_by_groupName.do",
	size:20,
	callBack:scrollBack,
	target:window.parent,
	containerId:"friendContainer",
	data:{groupName:""}
}
function scrollBack(data){
	//相片展示
	var P = new PICTURE();
	P.FirendPicture(data);	
	window.parent.iFrameHeight();
	P = null;
}
function loadByCase(event){
	event = event||window.event;
	var target = event.target || event.srcElement;
	if(target.tagName.toLowerCase()!="li"){
		return;
	}
	var groupName = target.innerHTML;
	if(groupName=="全部"){
		groupName = "";
	}
	//添加scroll事件
	/**var param = {
		url:"/networkforum/picture/get_by_groupName.do",
		size:20,
		callBack:function(d){
			var data = toJson(d);
			//相片展示
			var P = new PICTURE();
			P.clear();
			P.FirendPicture(data);	
			window.parent.iFrameHeight();
			P = null;
		},
		target:window.parent,
		containerId:"friendContainer"
	}
	page.scrolls(param);
	*/
	var _url = page.scrolls.method._getUrl();
	page.scrolls.method.setUrl(_url,{groupName:groupName});
	page.scrolls.method.setIndex(1);
	
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/picture/get_by_groupName.do?index=0&size=20&groupName="+encodeURIComponent(groupName),function(d){
		//var data = eval("("+d+")"); 
		var data = toJson(d);
		//相片展示
		var P = new PICTURE();
		P.clear();
		P.FirendPicture(data);	
		window.parent.iFrameHeight();
		P = null;
	});
	myajax = null;
}
function visitPicture(event){
	event = event || window.event;
	var target = event.target;
	if(target.tagName != "IMG"||!target.publishTime){
		return false;
	}
	var url = page.scrolls.method.getUrl();
	var targetId = target.index;
	//alert(page.scrolls.method.getUrl());
	window.parent.window.location = "/networkforum/visit/visit_picture.do?targetId="+targetId+"&loadUrl="+url;
}
</script>
</head>

<body>
	<section class="pictureFriend">
    	<section class="friendContainer" id="friendContainer" onclick="visitPicture(event);">
        	<ul id="leftinner" class="leftPicture ul">
            	<section class="pictureNav" id="pictureNav">
            		<section class="title">
                    	<img src="/networkforum/images/pictureNav.jpg" />
                        <span>热门标签</span>
                    </section>
                    <ul id="pninner" class="pninner" onclick="loadByCase(event)">
                    	<li>全部</li>
                        <!-- <li>风景</li>
                        <li>写真</li>
                        <li>可爱</li>
                        <li>清纯</li>
                        <li>自拍</li>
                        <li>气质</li>
                        <li>校花</li>
                        <li>网络美女</li>
                        <li>小清新</li>
                        <li>长发</li>
                        <li>性感</li>
                        <li>古典美女</li> -->
                    </ul>
                    <img class="navCorner" src="/networkforum/images/pictureNavBottom.jpg" />
               	</section>
            </ul>
            <ul id="middleinner" class="middlePicture ul">
            
            </ul>
            <ul id="rightinner" class="rightPicture ul">
            
            </ul>
        </section>
    </section>
</body>
<script type="text/javascript" src="/networkforum/js/scrolls.js"></script>
<script type="text/javascript" src="/networkforum/js/myajax.js"></script>
<script type="text/javascript" src="/networkforum/js/base.js"></script>
</html>
